<template>
  <div class="realtime-report">
    <!-- 实时统计四项指标 -->
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="realtime-stat-card">
          <div class="realtime-stat">
            <div class="stat-title">今日新增用户
              <el-tooltip placement="top">
                <div slot="content" style="max-width: 460px; line-height: 1.5;">
                  <div><strong>定义：</strong>当日00:00至当前时间新注册的用户数量</div>
                  <div><strong>计算：</strong>COUNT(DISTINCT user_id) WHERE create_time >= TODAY</div>
                  <div><strong>来源：</strong><code>consul_nfc_users</code>（按注册时间统计）</div>
                  <div><strong>更新频率：</strong>实时更新，每次刷新获取最新数据</div>
                  <div style="margin-top: 8px; padding: 8px; background: #3498db; border-radius: 4px; color: #fff;">
                    <div><strong>📊 业务意义：</strong></div>
                    <div>反映平台当日的用户增长活跃度和市场推广效果</div>
                    <div style="margin-top: 6px;"><strong>参考标准：</strong></div>
                    <div>• 工作日：50-100人/天为正常水平</div>
                    <div>• 节假日：可能出现2-3倍增长</div>
                    <div>• 推广期：预期增长5-10倍</div>
                    <div style="color: #ecf0f1; font-size: 12px;">注：异常增长需要关注数据质量和用户来源</div>
                  </div>
                </div>
                <i class="el-icon-question" style="margin-left:6px;color:#909399;"></i>
              </el-tooltip>
            </div>
            <div class="stat-value">{{ realtimeData.today_new_users || 0 }}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="realtime-stat-card">
          <div class="realtime-stat">
            <div class="stat-title">今日积分发放
              <el-tooltip placement="top">
                <div slot="content" style="max-width: 460px; line-height: 1.5;">
                  <div><strong>定义：</strong>当日00:00至当前时间发放给用户的积分总量</div>
                  <div><strong>计算：</strong>SUM(points_amount) WHERE award_time >= TODAY</div>
                  <div><strong>来源：</strong><code>consul_nfc_points_records</code>（record_type=AWARD）</div>
                  <div><strong>筛选：</strong>受商户筛选限制，按发放时间统计</div>
                  <div style="margin-top: 8px; padding: 8px; background: #27ae60; border-radius: 4px; color: #fff;">
                    <div><strong>💰 成本影响：</strong></div>
                    <div>每1积分约等于1元运营成本，需要控制发放节奏</div>
                    <div style="margin-top: 6px;"><strong>监控重点：</strong></div>
                    <div>• 正常水平：1000-5000积分/天</div>
                    <div>• 活动期间：可能增长3-5倍</div>
                    <div>• 异常波动：>10000积分/天需要审查</div>
                    <div><strong>来源渠道：</strong>签到、消费奖励、推荐返利、活动奖励等</div>
                    <div style="color: #ecf0f1; font-size: 12px;">注：大额发放建议设置审批流程</div>
                  </div>
                </div>
                <i class="el-icon-question" style="margin-left:6px;color:#909399;"></i>
              </el-tooltip>
            </div>
            <div class="stat-value">{{ realtimeData.today_points || 0 }}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="realtime-stat-card">
          <div class="realtime-stat">
            <div class="stat-title">今日佣金产生
              <el-tooltip placement="top">
                <div slot="content" style="max-width: 480px; line-height: 1.5;">
                  <div><strong>定义：</strong>当日00:00至当前时间产生的佣金总金额</div>
                  <div><strong>计算：</strong>SUM(commission_amount) WHERE create_time >= TODAY</div>
                  <div><strong>来源：</strong><code>consul_nfc_commission_records</code>（已结算+待结算均计入）</div>
                  <div><strong>状态说明：</strong>包含待结算和已结算的佣金记录</div>
                  <div style="margin-top: 8px; padding: 8px; background: #f39c12; border-radius: 4px; color: #fff;">
                    <div><strong>💼 收入指标：</strong></div>
                    <div>佣金是平台主要收入来源，直接反映业务健康度</div>
                    <div style="margin-top: 6px;"><strong>健康水平：</strong></div>
                    <div>• 日常水平：500-2000元/天</div>
                    <div>• 活动期间：可达5000-10000元/天</div>
                    <div>• 淡季期间：可能降至200-500元/天</div>
                    <div><strong>影响因素：</strong>订单量、客单价、佣金比例、商户活跃度</div>
                    <div style="color: #ecf0f1; font-size: 12px;">注：需要关注佣金/订单的比例是否合理</div>
                  </div>
                </div>
                <i class="el-icon-question" style="margin-left:6px;color:#909399;"></i>
              </el-tooltip>
            </div>
            <div class="stat-value">¥{{ realtimeData.today_commission || 0 }}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="realtime-stat-card">
          <div class="realtime-stat">
            <div class="stat-title">活跃用户数
              <el-tooltip placement="top">
                <div slot="content" style="max-width: 480px; line-height: 1.5;">
                  <div><strong>定义：</strong>当日00:00至当前时间有行为记录的去重用户数</div>
                  <div><strong>计算：</strong>COUNT(DISTINCT user_id) WHERE action_time >= TODAY</div>
                  <div><strong>来源：</strong>用户行为日志聚合（登录、浏览、操作等）</div>
                  <div><strong>行为范围：</strong>登录、下单、积分操作、分享、评价等活跃行为</div>
                  <div style="margin-top: 8px; padding: 8px; background: #8e44ad; border-radius: 4px; color: #fff;">
                    <div><strong>📱 用户活跃度：</strong></div>
                    <div>衡量平台用户粘性和使用频率的核心指标</div>
                    <div style="margin-top: 6px;"><strong>活跃度评估：</strong></div>
                    <div>• 健康比例：活跃用户占总用户15-25%</div>
                    <div>• 日活基准：200-800人/天为正常水平</div>
                    <div>• peak时段：中午11-14点，晚上18-21点</div>
                    <div><strong>提升策略：</strong>推送通知、签到活动、限时优惠等</div>
                    <div style="color: #ecf0f1; font-size: 12px;">注：持续低活跃需要分析用户流失原因</div>
                  </div>
                </div>
                <i class="el-icon-question" style="margin-left:6px;color:#909399;"></i>
              </el-tooltip>
            </div>
            <div class="stat-value">{{ realtimeData.active_users || 0 }}</div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 实时数据监控图表 -->
    <el-row :gutter="20" class="chart-row">
      <el-col :span="24">
        <el-card>
          <div slot="header">实时数据监控
            <el-tooltip placement="top">
              <div slot="content" style="max-width: 520px; line-height: 1.5;">
                <div><strong>定义：</strong>展示当日各时段的用户活跃度和积分发放趋势变化</div>
                <div><strong>X 轴：</strong>时间标签（按小时或更细粒度划分）</div>
                <div><strong>Y 轴：</strong>数量统计（用户数量、积分数量）</div>
                <div><strong>数据源：</strong>实时聚合计算，每30秒更新一次</div>
                <div style="margin-top: 8px; padding: 8px; background: #2c3e50; border-radius: 4px; color: #fff;">
                  <div><strong>📈 监控要点：</strong></div>
                  <div>通过趋势变化及时发现异常波动和业务机会</div>
                  <div style="margin-top: 6px;"><strong>关键时段：</strong></div>
                  <div>• 早高峰：8-10点（通勤时间，移动端活跃）</div>
                  <div>• 午高峰：11-14点（午餐及休息时间）</div>
                  <div>• 晚高峰：18-21点（下班及娱乐时间）</div>
                  <div><strong>异常识别：</strong>突然的峰值或谷值可能代表系统问题或热点事件</div>
                  <div style="color: #bdc3c7; font-size: 12px;">注：数据更新有轻微延迟，以实际业务为准</div>
                </div>
              </div>
              <i class="el-icon-question" style="margin-left:6px;color:#909399;"></i>
            </el-tooltip>
          </div>
          <div id="realtimeChart" style="height: 350px;"></div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 概览明细（默认折叠） -->
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card shadow="never">
          <div slot="header">详细概览
            <el-tooltip placement="top">
              <div slot="content" style="max-width: 460px; line-height: 1.5;">
                <div><strong>功能说明：</strong>提供积分系统和佣金系统的详细运营数据</div>
                <div><strong>数据范围：</strong>包含历史累计、当前状态、今日统计等多维度信息</div>
                <div><strong>使用场景：</strong>日常运营监控、财务核算、业务分析决策</div>
                <div style="margin-top: 8px; padding: 8px; background: #16a085; border-radius: 4px; color: #fff;">
                  <div><strong>💡 数据说明：</strong></div>
                  <div>此处数据为运营管理专用，包含敏感的财务和用户信息</div>
                  <div style="margin-top: 6px;"><strong>重点关注：</strong></div>
                  <div>• 积分发放与消费的平衡状况</div>
                  <div>• 佣金结算的及时性和准确性</div>
                  <div>• 用户活跃度的变化趋势</div>
                  <div style="color: #ecf0f1; font-size: 12px;">注：数据更新频率为实时，可展开查看详情</div>
                </div>
              </div>
              <i class="el-icon-question" style="margin-left:6px;color:#909399;"></i>
            </el-tooltip>
          </div>
          <el-collapse v-model="realtimeCollapse">
            <el-collapse-item name="points">
              <template slot="title">积分概览</template>
              <el-row :gutter="12">
                <el-col :span="6">
                  <div class="re-stat-item">
                    总账户数：{{ realtimeData.points && realtimeData.points.account_stats ? realtimeData.points.account_stats.total_accounts : 0 }}
                    <el-tooltip placement="top">
                      <div slot="content" style="max-width: 400px; line-height: 1.5;">
                        <div><strong>定义：</strong>系统中拥有积分账户的用户总数</div>
                        <div><strong>计算：</strong>COUNT(DISTINCT user_id) FROM consul_nfc_points_accounts</div>
                        <div><strong>说明：</strong>首次获得积分时自动创建账户</div>
                        <div style="margin-top: 6px; padding: 6px; background: #3498db; border-radius: 3px; color: #fff;">
                          <div><strong>📊 增长情况：</strong>每日新增10-50个账户为正常水平</div>
                        </div>
                      </div>
                      <i class="el-icon-question" style="margin-left:4px;color:#909399;font-size:12px;"></i>
                    </el-tooltip>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="re-stat-item">
                    累计发放：{{ realtimeData.points && realtimeData.points.account_stats ? realtimeData.points.account_stats.total_points_issued : 0 }}
                    <el-tooltip placement="top">
                      <div slot="content" style="max-width: 400px; line-height: 1.5;">
                        <div><strong>定义：</strong>系统启动以来发放的积分总量</div>
                        <div><strong>计算：</strong>SUM(points_amount) WHERE record_type='AWARD'</div>
                        <div><strong>成本评估：</strong>1积分≈1元运营成本</div>
                        <div style="margin-top: 6px; padding: 6px; background: #27ae60; border-radius: 3px; color: #fff;">
                          <div><strong>💰 财务影响：</strong>直接关联运营成本和用户激励效果</div>
                        </div>
                      </div>
                      <i class="el-icon-question" style="margin-left:4px;color:#909399;font-size:12px;"></i>
                    </el-tooltip>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="re-stat-item">
                    当前可用：{{ realtimeData.points && realtimeData.points.account_stats ? realtimeData.points.account_stats.total_available_points : 0 }}
                    <el-tooltip placement="top">
                      <div slot="content" style="max-width: 400px; line-height: 1.5;">
                        <div><strong>定义：</strong>用户当前可用的积分余额总和</div>
                        <div><strong>计算：</strong>SUM(available_balance) FROM consul_nfc_points_accounts</div>
                        <div><strong>公式：</strong>累计发放 - 累计消费 - 已过期</div>
                        <div style="margin-top: 6px; padding: 6px; background: #f39c12; border-radius: 3px; color: #fff;">
                          <div><strong>🔄 流动性：</strong>反映积分的实际流通价值和用户购买力</div>
                        </div>
                      </div>
                      <i class="el-icon-question" style="margin-left:4px;color:#909399;font-size:12px;"></i>
                    </el-tooltip>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="re-stat-item">
                    累计消费：{{ realtimeData.points && realtimeData.points.account_stats ? realtimeData.points.account_stats.total_consumed_points : 0 }}
                    <el-tooltip placement="top">
                      <div slot="content" style="max-width: 400px; line-height: 1.5;">
                        <div><strong>定义：</strong>用户已消费的积分总量</div>
                        <div><strong>计算：</strong>SUM(points_amount) WHERE record_type='CONSUME'</div>
                        <div><strong>消费率：</strong>消费积分/发放积分 × 100%</div>
                        <div style="margin-top: 6px; padding: 6px; background: #e74c3c; border-radius: 3px; color: #fff;">
                          <div><strong>💳 活跃度：</strong>健康消费率应维持在60-80%之间</div>
                        </div>
                      </div>
                      <i class="el-icon-question" style="margin-left:4px;color:#909399;font-size:12px;"></i>
                    </el-tooltip>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="12" style="margin-top:8px;">
                <el-col :span="6">
                  <div class="re-stat-item">
                    人均可用：{{ realtimeData.points && realtimeData.points.account_stats ? realtimeData.points.account_stats.avg_available_points : 0 }}
                    <el-tooltip placement="top">
                      <div slot="content" style="max-width: 400px; line-height: 1.5;">
                        <div><strong>定义：</strong>平均每个账户的可用积分余额</div>
                        <div><strong>计算：</strong>当前可用积分总量 ÷ 总账户数</div>
                        <div><strong>意义：</strong>反映用户积分持有分布情况</div>
                        <div style="margin-top: 6px; padding: 6px; background: #9b59b6; border-radius: 3px; color: #fff;">
                          <div><strong>👥 用户画像：</strong>健康水平为100-500积分/人</div>
                        </div>
                      </div>
                      <i class="el-icon-question" style="margin-left:4px;color:#909399;font-size:12px;"></i>
                    </el-tooltip>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="re-stat-item">
                    今日发放：{{ realtimeData.points && realtimeData.points.today_stats ? realtimeData.points.today_stats.points_awarded : 0 }}
                    <el-tooltip placement="top">
                      <div slot="content" style="max-width: 400px; line-height: 1.5;">
                        <div><strong>定义：</strong>今日00:00至当前时间发放的积分总量</div>
                        <div><strong>来源：</strong>签到、消费奖励、推荐返利、活动奖励等</div>
                        <div><strong>监控：</strong>异常增长需检查是否有刷分行为</div>
                        <div style="margin-top: 6px; padding: 6px; background: #1abc9c; border-radius: 3px; color: #fff;">
                          <div><strong>🎁 激励效果：</strong>正常水平1000-5000积分/天</div>
                        </div>
                      </div>
                      <i class="el-icon-question" style="margin-left:4px;color:#909399;font-size:12px;"></i>
                    </el-tooltip>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="re-stat-item">
                    今日消费：{{ realtimeData.points && realtimeData.points.today_stats ? realtimeData.points.today_stats.points_consumed : 0 }}
                    <el-tooltip placement="top">
                      <div slot="content" style="max-width: 400px; line-height: 1.5;">
                        <div><strong>定义：</strong>今日00:00至当前时间用户消费的积分总量</div>
                        <div><strong>用途：</strong>兑换商品、抵扣订单、参与活动等</div>
                        <div><strong>消费比：</strong>今日消费/今日发放，健康比例为50-90%</div>
                        <div style="margin-top: 6px; padding: 6px; background: #e67e22; border-radius: 3px; color: #fff;">
                          <div><strong>🛒 消费活跃：</strong>反映积分系统的实际使用效果</div>
                        </div>
                      </div>
                      <i class="el-icon-question" style="margin-left:4px;color:#909399;font-size:12px;"></i>
                    </el-tooltip>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="re-stat-item">
                    今日交易：{{ realtimeData.points && realtimeData.points.today_stats ? realtimeData.points.today_stats.transactions : 0 }}
                    <el-tooltip placement="top">
                      <div slot="content" style="max-width: 400px; line-height: 1.5;">
                        <div><strong>定义：</strong>今日积分相关的交易记录总数</div>
                        <div><strong>包含：</strong>发放记录、消费记录、退还记录等</div>
                        <div><strong>平均值：</strong>交易总额/交易笔数 = 单笔积分量</div>
                        <div style="margin-top: 6px; padding: 6px; background: #34495e; border-radius: 3px; color: #fff;">
                          <div><strong>📊 频次分析：</strong>反映用户与积分系统的互动频率</div>
                        </div>
                      </div>
                      <i class="el-icon-question" style="margin-left:4px;color:#909399;font-size:12px;"></i>
                    </el-tooltip>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="12" style="margin-top:8px;">
                <el-col :span="6">
                  <div class="re-stat-item">
                    今日活跃用户：{{ realtimeData.points && realtimeData.points.today_stats ? realtimeData.points.today_stats.active_users : 0 }}
                    <el-tooltip placement="top">
                      <div slot="content" style="max-width: 400px; line-height: 1.5;">
                        <div><strong>定义：</strong>今日有积分相关操作的去重用户数</div>
                        <div><strong>统计范围：</strong>获得积分、消费积分、查看积分等行为</div>
                        <div><strong>活跃标准：</strong>有任何积分系统交互即视为活跃</div>
                        <div style="margin-top: 6px; padding: 6px; background: #2ecc71; border-radius: 3px; color: #fff;">
                          <div><strong>📈 参与度：</strong>积分系统用户的参与度指标</div>
                        </div>
                      </div>
                      <i class="el-icon-question" style="margin-left:4px;color:#909399;font-size:12px;"></i>
                    </el-tooltip>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="re-stat-item">
                    近7天活跃用户：{{ realtimeData.points && realtimeData.points.activity_stats ? realtimeData.points.activity_stats.weekly_active_users : 0 }}
                    <el-tooltip placement="top">
                      <div slot="content" style="max-width: 400px; line-height: 1.5;">
                        <div><strong>定义：</strong>近7天内有积分操作的去重用户数</div>
                        <div><strong>计算周期：</strong>从当前时间向前推7个完整天</div>
                        <div><strong>趋势分析：</strong>反映积分系统的用户留存情况</div>
                        <div style="margin-top: 6px; padding: 6px; background: #8e44ad; border-radius: 3px; color: #fff;">
                          <div><strong>🔄 留存度：</strong>健康的7日活跃用户数应为日活2-3倍</div>
                        </div>
                      </div>
                      <i class="el-icon-question" style="margin-left:4px;color:#909399;font-size:12px;"></i>
                    </el-tooltip>
                  </div>
                </el-col>
              </el-row>
            </el-collapse-item>
            <el-collapse-item name="commission">
              <template slot="title">佣金概览</template>
              <el-row :gutter="12">
                <el-col :span="6">
                  <div class="re-stat-item">
                    佣金总额：¥{{ realtimeData.commission && realtimeData.commission.total_stats ? realtimeData.commission.total_stats.total_amount : 0 }}
                    <el-tooltip placement="top">
                      <div slot="content" style="max-width: 420px; line-height: 1.5;">
                        <div><strong>定义：</strong>平台历史产生的佣金总金额（包含待结算+已结算）</div>
                        <div><strong>计算：</strong>SUM(commission_amount) FROM consul_nfc_commission_records</div>
                        <div><strong>组成：</strong>订单佣金、推荐佣金、活动佣金等</div>
                        <div style="margin-top: 6px; padding: 6px; background: #e74c3c; border-radius: 3px; color: #fff;">
                          <div><strong>💰 核心收入：</strong>平台主要收入来源和盈利指标</div>
                        </div>
                      </div>
                      <i class="el-icon-question" style="margin-left:4px;color:#909399;font-size:12px;"></i>
                    </el-tooltip>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="re-stat-item">
                    待结算金额：¥{{ realtimeData.commission && realtimeData.commission.total_stats ? realtimeData.commission.total_stats.pending_amount : 0 }}
                    <el-tooltip placement="top">
                      <div slot="content" style="max-width: 420px; line-height: 1.5;">
                        <div><strong>定义：</strong>已产生但尚未结算给商户的佣金金额</div>
                        <div><strong>状态：</strong>settlement_status = 'PENDING'</div>
                        <div><strong>结算周期：</strong>通常T+1或T+7结算</div>
                        <div style="margin-top: 6px; padding: 6px; background: #f39c12; border-radius: 3px; color: #fff;">
                          <div><strong>⏳ 现金流：</strong>需要关注资金压占情况和结算时效</div>
                        </div>
                      </div>
                      <i class="el-icon-question" style="margin-left:4px;color:#909399;font-size:12px;"></i>
                    </el-tooltip>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="re-stat-item">
                    已结算金额：¥{{ realtimeData.commission && realtimeData.commission.total_stats ? realtimeData.commission.total_stats.settled_amount : 0 }}
                    <el-tooltip placement="top">
                      <div slot="content" style="max-width: 420px; line-height: 1.5;">
                        <div><strong>定义：</strong>已完成结算并支付给商户的佣金金额</div>
                        <div><strong>状态：</strong>settlement_status = 'SETTLED'</div>
                        <div><strong>验证：</strong>待结算+已结算 = 佣金总额</div>
                        <div style="margin-top: 6px; padding: 6px; background: #27ae60; border-radius: 3px; color: #fff;">
                          <div><strong>✅ 履约率：</strong>反映平台结算能力和信誉度</div>
                        </div>
                      </div>
                      <i class="el-icon-question" style="margin-left:4px;color:#909399;font-size:12px;"></i>
                    </el-tooltip>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="re-stat-item">
                    平均佣金：¥{{ realtimeData.commission && realtimeData.commission.total_stats ? realtimeData.commission.total_stats.avg_amount : 0 }}
                    <el-tooltip placement="top">
                      <div slot="content" style="max-width: 420px; line-height: 1.5;">
                        <div><strong>定义：</strong>每笔佣金记录的平均金额</div>
                        <div><strong>计算：</strong>佣金总额 ÷ 佣金记录总数</div>
                        <div><strong>意义：</strong>反映订单价值和佣金比例的综合水平</div>
                        <div style="margin-top: 6px; padding: 6px; background: #3498db; border-radius: 3px; color: #fff;">
                          <div><strong>📊 单价水平：</strong>正常范围5-50元/笔，异常需分析</div>
                        </div>
                      </div>
                      <i class="el-icon-question" style="margin-left:4px;color:#909399;font-size:12px;"></i>
                    </el-tooltip>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="12" style="margin-top:8px;">
                <el-col :span="6">
                  <div class="re-stat-item">
                    待结算笔数：{{ realtimeData.commission && realtimeData.commission.total_stats ? realtimeData.commission.total_stats.pending_count : 0 }}
                    <el-tooltip placement="top">
                      <div slot="content" style="max-width: 400px; line-height: 1.5;">
                        <div><strong>定义：</strong>状态为待结算的佣金记录条数</div>
                        <div><strong>筛选：</strong>settlement_status = 'PENDING'</div>
                        <div><strong>平均值：</strong>待结算金额 ÷ 待结算笔数 = 单笔佣金</div>
                        <div style="margin-top: 6px; padding: 6px; background: #e67e22; border-radius: 3px; color: #fff;">
                          <div><strong>📋 处理量：</strong>关注处理效率和积压情况</div>
                        </div>
                      </div>
                      <i class="el-icon-question" style="margin-left:4px;color:#909399;font-size:12px;"></i>
                    </el-tooltip>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="re-stat-item">
                    已结算笔数：{{ realtimeData.commission && realtimeData.commission.total_stats ? realtimeData.commission.total_stats.settled_count : 0 }}
                    <el-tooltip placement="top">
                      <div slot="content" style="max-width: 400px; line-height: 1.5;">
                        <div><strong>定义：</strong>状态为已结算的佣金记录条数</div>
                        <div><strong>筛选：</strong>settlement_status = 'SETTLED'</div>
                        <div><strong>验证：</strong>待结算笔数 + 已结算笔数 = 总笔数</div>
                        <div style="margin-top: 6px; padding: 6px; background: #16a085; border-radius: 3px; color: #fff;">
                          <div><strong>✨ 完成度：</strong>反映结算系统的处理能力</div>
                        </div>
                      </div>
                      <i class="el-icon-question" style="margin-left:4px;color:#909399;font-size:12px;"></i>
                    </el-tooltip>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="re-stat-item">
                    待结算记录：{{ realtimeData.commission && realtimeData.commission.settlement_stats ? realtimeData.commission.settlement_stats.pending_records : 0 }}
                    <el-tooltip placement="top">
                      <div slot="content" style="max-width: 400px; line-height: 1.5;">
                        <div><strong>定义：</strong>待结算状态的详细记录统计（可能包含历史数据）</div>
                        <div><strong>范围：</strong>更详细的结算明细统计</div>
                        <div><strong>用途：</strong>用于财务核算和对账</div>
                        <div style="margin-top: 6px; padding: 6px; background: #8e44ad; border-radius: 3px; color: #fff;">
                          <div><strong>🔍 明细级：</strong>比基础统计更精确的结算记录</div>
                        </div>
                      </div>
                      <i class="el-icon-question" style="margin-left:4px;color:#909399;font-size:12px;"></i>
                    </el-tooltip>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="re-stat-item">
                    待结算总额：¥{{ realtimeData.commission && realtimeData.commission.settlement_stats ? realtimeData.commission.settlement_stats.pending_total_amount : 0 }}
                    <el-tooltip placement="top">
                      <div slot="content" style="max-width: 400px; line-height: 1.5;">
                        <div><strong>定义：</strong>详细结算统计中的待结算金额总数</div>
                        <div><strong>对比：</strong>应与"待结算金额"基本一致</div>
                        <div><strong>差异：</strong>如有差异需要检查数据一致性</div>
                        <div style="margin-top: 6px; padding: 6px; background: #c0392b; border-radius: 3px; color: #fff;">
                          <div><strong>💴 核算级：</strong>财务核算使用的精确金额统计</div>
                        </div>
                      </div>
                      <i class="el-icon-question" style="margin-left:4px;color:#909399;font-size:12px;"></i>
                    </el-tooltip>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="12" style="margin-top:8px;">
                <el-col :span="6">
                  <div class="re-stat-item">
                    今日笔数：{{ realtimeData.commission && realtimeData.commission.today_stats ? realtimeData.commission.today_stats.commissions : 0 }}
                    <el-tooltip placement="top">
                      <div slot="content" style="max-width: 400px; line-height: 1.5;">
                        <div><strong>定义：</strong>今日00:00至当前时间产生的佣金记录数</div>
                        <div><strong>统计范围：</strong>所有佣金类型（订单、推荐、活动等）</div>
                        <div><strong>实时性：</strong>每次刷新获取最新数据</div>
                        <div style="margin-top: 6px; padding: 6px; background: #2c3e50; border-radius: 3px; color: #fff;">
                          <div><strong>📈 业务量：</strong>反映今日平台业务活跃程度</div>
                        </div>
                      </div>
                      <i class="el-icon-question" style="margin-left:4px;color:#909399;font-size:12px;"></i>
                    </el-tooltip>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="re-stat-item">
                    今日金额：¥{{ realtimeData.commission && realtimeData.commission.today_stats ? realtimeData.commission.today_stats.amount : 0 }}
                    <el-tooltip placement="top">
                      <div slot="content" style="max-width: 400px; line-height: 1.5;">
                        <div><strong>定义：</strong>今日00:00至当前时间产生的佣金总金额</div>
                        <div><strong>组成：</strong>今日所有佣金记录的金额汇总</div>
                        <div><strong>对比：</strong>可与页面顶部"今日佣金产生"数据对比验证</div>
                        <div style="margin-top: 6px; padding: 6px; background: #d35400; border-radius: 3px; color: #fff;">
                          <div><strong>💰 今日收入：</strong>当日核心收入指标，关注增长趋势</div>
                        </div>
                      </div>
                      <i class="el-icon-question" style="margin-left:4px;color:#909399;font-size:12px;"></i>
                    </el-tooltip>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="re-stat-item">
                    今日活跃商户：{{ realtimeData.commission && realtimeData.commission.today_stats ? realtimeData.commission.today_stats.active_merchants : 0 }}
                    <el-tooltip placement="top">
                      <div slot="content" style="max-width: 400px; line-height: 1.5;">
                        <div><strong>定义：</strong>今日产生佣金记录的去重商户数量</div>
                        <div><strong>活跃标准：</strong>有佣金产生即视为活跃商户</div>
                        <div><strong>业务价值：</strong>反映平台商户参与度和生态活跃性</div>
                        <div style="margin-top: 6px; padding: 6px; background: #7f8c8d; border-radius: 3px; color: #fff;">
                          <div><strong>🏪 生态健康：</strong>活跃商户数量关系平台生态繁荣度</div>
                        </div>
                      </div>
                      <i class="el-icon-question" style="margin-left:4px;color:#909399;font-size:12px;"></i>
                    </el-tooltip>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="re-stat-item">
                    今日平均佣金：¥{{ realtimeData.commission && realtimeData.commission.today_stats ? realtimeData.commission.today_stats.avg_amount : 0 }}
                    <el-tooltip placement="top">
                      <div slot="content" style="max-width: 400px; line-height: 1.5;">
                        <div><strong>定义：</strong>今日佣金记录的平均金额</div>
                        <div><strong>计算：</strong>今日金额 ÷ 今日笔数</div>
                        <div><strong>趋势分析：</strong>可对比历史均值，分析订单价值变化</div>
                        <div style="margin-top: 6px; padding: 6px; background: #95a5a6; border-radius: 3px; color: #fff;">
                          <div><strong>📊 单价趋势：</strong>反映今日订单价值和佣金水平</div>
                        </div>
                      </div>
                      <i class="el-icon-question" style="margin-left:4px;color:#909399;font-size:12px;"></i>
                    </el-tooltip>
                  </div>
                </el-col>
              </el-row>
            </el-collapse-item>
          </el-collapse>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { nfcReportsAPI } from '@/api/nfc'
import ChartMixin from '../mixins/ChartMixin'

export default {
  name: 'RealtimeReport',
  mixins: [ChartMixin],
  props: {
    filters: { type: Object, required: true }
  },
  data() {
    return {
      loading: false,
      realtimeData: {},
      realtimeCollapse: [] // 控制折叠面板展开状态
    }
  },
  watch: {
    filters: { handler() { this.loadData() }, deep: true }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    async loadData() {
      try {
        this.loading = true
        console.log('加载实时数据参数:', this.filters)
        const response = await nfcReportsAPI.getRealtimeStats(this.filters)
        console.log('实时数据响应:', response)
        this.realtimeData = response.data || {}
        console.log('设置后的realtimeData:', this.realtimeData)
        
        this.$nextTick(() => this.renderRealtimeChart())
      } catch (error) {
        console.error('加载实时数据失败：', error)
        this.$message.error('加载实时数据失败')
      } finally {
        this.loading = false
      }
    },
    renderRealtimeChart() {
      if (!this.realtimeData) {
        console.warn('实时数据缺失')
        return
      }

      console.log('开始渲染实时图表，数据:', this.realtimeData)

      // 使用后端返回的series数据，如果没有则使用默认配置
      const series = this.realtimeData.series || [
        {
          name: '用户活跃度',
          data: this.realtimeData.user_activity || [],
          type: 'line',
          smooth: true,
          itemStyle: { color: '#409EFF' }
        },
        {
          name: '积分发放',
          data: this.realtimeData.points_distribution || [],
          type: 'line',
          smooth: true,
          itemStyle: { color: '#67C23A' }
        }
      ];

      console.log('图表系列数据:', series)
      console.log('时间标签数据:', this.realtimeData.time_labels)

      // 为series添加样式配置
      const styledSeries = series.map((item, index) => ({
        ...item,
        smooth: true,
        itemStyle: {
          color: index === 0 ? '#409EFF' : '#67C23A'
        }
      }));

      // 使用ChartMixin的renderChart方法
      this.renderChart('realtimeChart', {
        title: { text: '' },
        xAxis: { type: 'category', data: this.realtimeData.time_labels || [] },
        yAxis: { type: 'value' },
        series: styledSeries,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: series.map(item => item.name)
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        }
      })
      
      console.log('实时图表渲染完成')
    }
  }
}
</script>

<style scoped>
.realtime-stat-card {
  text-align: center;
}

.realtime-stat {
  padding: 20px;
}

.stat-title {
  font-size: 14px;
  color: #909399;
  margin-bottom: 10px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #409EFF;
}

.chart-row {
  margin-top: 20px;
  margin-bottom: 20px;
}

.re-stat-item {
  padding: 8px 12px;
  background: #f8f9fa;
  border-radius: 4px;
  margin-bottom: 8px;
  font-size: 13px;
  color: #606266;
  border-left: 3px solid #409EFF;
}
</style>